<template>
  <div class="station-info-container">
    <!-- 顶部信息栏 -->
    <div class="top-info">
      <div class="left-image">
        <img src="@/assets/images/address.png" style="width:55px;height:55px" />
      </div>
      <div class="top-info1">
        <div class="info-item">
          <span class="label">站点名称：</span>
          <span class="label1">{{ siteInfo?.siteName || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">站长姓名：</span>
          <span class="label1">{{ siteInfo?.sysuser?.nickName || '未认证' }}</span>
        </div>
        <div class="info-item">
          <span class="label">配送员：</span>
          <span class="label1"> 0人</span>
        </div>
        <div class="info-item">
          <span class="label">所在地：</span>
          <span class="label1">{{ siteInfo?.address || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">手机号码：</span>
          <span class="label1">{{ siteInfo?.sysuser?.phonenumber || '未设置' }}</span>
          <!--          <a-button type="link" @click="handleChangePhone">更换手机号</a-button>-->
        </div>
        <div class="info-item">
          <span class="label">状态：</span>
          <span class="label1">{{ formatStatus(siteInfo?.sysuser?.status) }}</span>
        </div>
      </div>
    </div>

    <!-- 标签栏 -->
    <a-tabs default-active-key="1" class="tabs">
      <a-tab-pane tab="基本信息" key="1">
        <div class="basic-info">
          <div class="info-item">
            <span class="label">详细地址：</span>
            <span class="label1">{{ siteInfo?.address || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">配送时段：</span>
            <span class="label1">{{ siteInfo?.deliveryHours || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">配送区域：</span>
            <!-- 这里地图部分，若依项目中若集成了地图（如高德、百度），需结合对应 SDK 渲染，这里先占位 -->
            <div class="map-container">
              <MapContainer
                  v-if="siteInfo?.longitude && siteInfo?.latitude"
                  :longitude="siteInfo.longitude"
                  :latitude="siteInfo.latitude"
                  :siteName="siteInfo.siteName || '配送站点'"
                  :point11="siteInfo.point11"
                  :point12="siteInfo.point12"
                  :point21="siteInfo.point21"
                  :point22="siteInfo.point22"
                  :point31="siteInfo.point31"
                  :point32="siteInfo.point32"
                  :point41="siteInfo.point41"
                  :point42="siteInfo.point42"
                  :point51="siteInfo.point51"
                  :point52="siteInfo.point52"
                  :showDistrict="true"
              />
              <div v-else class="mock-map">
                <span>未设置地图坐标</span>
              </div>
            </div>
          </div>
          <div class="info-item">
            <span class="label">建站时间：</span>
            <span class="label1">{{ formatDate(siteInfo?.createTime) || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">开通时间：</span>
            <span class="label1">{{ formatDate(siteInfo?.createTime) || '未设置' }}</span>
          </div>
          <el-button type="primary" @click="handleChangeStation" class="custom-btn"  >修改站点信息</el-button>
        </div>
      </a-tab-pane>
    </a-tabs>
    <!-- 修改站点信息弹出框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="editForm"  ref="siteRef" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="站点名称" prop="siteName">
              <el-input v-model="editForm.siteName" placeholder="请输入站点名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="editForm.address" placeholder="请输入站点详细地址" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="配送时段" prop="deliveryHours">
              <el-input v-model="editForm.deliveryHours" placeholder="请输入配送时段" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="中心经度" prop="longitude">
              <el-input v-model="editForm.longitude" placeholder="请输入中心点经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中心纬度" prop="latitude">
              <el-input v-model="editForm.latitude" placeholder="请输入中心点纬度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点1经度" prop="point11">
              <el-input v-model="editForm.point11" placeholder="请输入区域点1经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点1纬度" prop="point12">
              <el-input v-model="editForm.point12" placeholder="请输入区域点1纬度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点2经度" prop="point21">
              <el-input v-model="editForm.point21" placeholder="请输入区域点2经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点2纬度" prop="point22">
              <el-input v-model="editForm.point22" placeholder="请输入区域点2纬度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点3经度" prop="point31">
              <el-input v-model="editForm.point31" placeholder="请输入区域点3经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点3纬度" prop="point32">
              <el-input v-model="editForm.point32" placeholder="请输入区域点3纬度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点4经度" prop="point41">
              <el-input v-model="editForm.point41" placeholder="请输入区域点4经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点4纬度" prop="point42">
              <el-input v-model="editForm.point42" placeholder="请输入区域点4纬度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点5经度" prop="point51">
              <el-input v-model="editForm.point51" placeholder="请输入区域点5经度" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域点5纬度" prop="point52">
              <el-input v-model="editForm.point52" placeholder="请输入区域点5纬度" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import MapContainer from "@/components/MapContainer.vue";
import { ref, onMounted,reactive } from 'vue';
import { getSiteInfo,updateSiteInfo } from '@/api/system/siteuser';
import { message } from 'ant-design-vue';


const siteInfo = ref({});
const open = ref(false);
const title = ref("")

// 编辑表单数据
const editForm = reactive({
  siteName: '',
  address: '',
  deliveryHours: '',
  id: null,
  longitude: null,
  latitude: null,
  point11: null,
  point12: null,
  point21: null,
  point22: null,
  point31: null,
  point32: null,
  point41: null,
  point42: null,
  point51: null,
  point52: null,
});

function cancel() {
  open.value = false
  reset()
}
/** 重置操作表单 */
function reset() {
  editForm.value = {
    siteName: '',
    address: '',
    deliveryHours: '',
    id: null,
    longitude: null,
    latitude: null,
    point11: null,
    point12: null,
    point21: null,
    point22: null,
    point31: null,
    point32: null,
    point41: null,
    point42: null,
    point51: null,
    point52: null,
  }
  proxy.resetForm("siteRef")
}

onMounted(async () => {
  const siteId = 1; // 实际项目中应从路由参数或其他地方获取
  try {
    const res = await getSiteInfo(siteId);
    console.log(res.data);
    siteInfo.value = res;
    if (!siteInfo.value) {
      throw new Error("返回数据为空");
    }
    console.log(siteInfo.value);
    console.log(siteInfo.value.id);
    // 模拟配送员数量，实际应从后端获取
    // if (!siteInfo.value.deliveryStaff) {
    //   siteInfo.value.deliveryStaff = Math.floor(Math.random() * 50) + 10;
    // }
  } catch (error) {
    console.error('获取站点信息异常:', error);
    message.error('网络错误，请稍后重试');
  }
});

// 打开编辑弹窗时初始化表单数据
const handleChangeStation = () => {
  if (!siteInfo.value.id) {
    message.error('站点ID不存在，无法编辑');
    return;
  }
  title.value = "修改站点信息"
  // // 深拷贝原始数据到编辑表单
  editForm.id = siteInfo.value.id || '';
  editForm.siteName = siteInfo.value.siteName || '';
  editForm.address = siteInfo.value.address || '';
  editForm.deliveryHours = siteInfo.value.deliveryHours || '';
  editForm.longitude = siteInfo.value.longitude || '';
  editForm.latitude = siteInfo.value.latitude || '';
  editForm.point11 = siteInfo.value.point11 || '';
  editForm.point12 = siteInfo.value.point12 || '';
  editForm.point21 = siteInfo.value.point21 || '';
  editForm.point22 = siteInfo.value.point22 || '';
  editForm.point31 = siteInfo.value.point31 || '';
  editForm.point32 = siteInfo.value.point32 || '';
  editForm.point41 = siteInfo.value.point41 || '';
  editForm.point42 = siteInfo.value.point42 || '';
  editForm.point51 = siteInfo.value.point51 || '';
  editForm.point52 = siteInfo.value.point52 || '';
  open.value = true;
};

// 保存修改
const submitForm = async () => {
  try {
    // 这里实际项目中应该调用后端API
    const response = await updateSiteInfo(editForm);
      // 更新页面显示的数据
    if (response){
      siteInfo.value = {
        ...siteInfo.value,  // 保留原始数据中所有未修改的字段
        ...editForm         // 用表单中的新数据覆盖对应字段（只覆盖表单中存在的字段）
      };
      console.log(siteInfo.value)
      open.value = false;
      message.success('站点信息修改成功');
    }
  } catch (error) {
    console.error('修改站点信息失败:', error);
    message.error('修改失败，请稍后重试');
  }
};

// 格式化状态
const formatStatus = (status) => {
  switch (status) {
    case '0': return '正常';
    case '1': return '停用';
    default: return '未知';
  }
};
// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  // 假设日期格式为 "YYYY-MM-DDTHH:MM:SS" 或时间戳
  const date = new Date(dateStr);
  return date.toLocaleDateString() + ' ' + date.toTimeString().substring(0, 8);
};
</script>

<style scoped>
.station-info-container {
  padding: 20px;
}
.top-info1 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.left-image {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  margin-right:40px ;
}
.top-info {
  display: flex;
  margin-bottom: 20px;
  padding: 15px;
  background: #EBF2FE;
  border-radius: 8px;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 300px;
}
.label {
  font-size: 14px;
  color: #9B9B9B;
  width: 80px;
}
.label1 {
  font-size: 14px;
  color: black;
  width: 200px;
}
.tabs {
  margin-top: 20px;
}
.basic-info,
.auth-info {
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 设置子元素之间的垂直间距 */
}
.map-container {
  margin-top: 8px;
  width: 100%;
  max-width: 600px;
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.mock-map {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  background-color: #f5f5f5;
}
.custom-btn
{
  text-align: center;
  width: 120px;
  height: 40px;
}
</style>